<script setup lang="ts">
import CountUp from 'vue-countup-v3';
import {isElementInViewport, throttle} from '@/utils';
import {
  getHomeProductServer,
  getHomeScreenListServer, getHomeSolutionListServer
} from "@/api/home";
import {getNewsListServer, getNewsTypeServer} from "@/api/about/news";
import {ElMessage} from "element-plus";
import {partnerSub} from "@/api/partner";
import {getSeoInfoServer, getWebBanner} from "@/api/common";
import DefaultBannerImage from  '@/assets/images/home/home_banner.jpg'

const showCount = ref(false);
const productList = ref([])
const solutionList = ref([])
const screenList = ref([])
const screenHeight = ref(0)
const newsAbout = reactive({
  Hot: {},
  list: []
})
const newsTypeList = ref([])
const activeNewsType = ref('')
const getProduct = async () => {
  const {data} = await getHomeProductServer()
  productList.value = data
}
const getSolution = async () => {
  const {data} = await getHomeSolutionListServer()
  solutionList.value = data
}
const getScreenList = async () => {
  try {
    let {data} = await getHomeScreenListServer()
    const newChunk = []

    for (let i = 0; i < data.length; i += 16) {
      const chunk = data.slice(i, i + 16);
      newChunk.push(chunk);
    }
    let h = 10
    if (data.length <= 16) {
      if (data.length <= 5) {
        h = 3.33
      } else if (data.length <= 11) {
        h = 3.33 * 2
      }
    }
    newChunk.forEach((data) => {
      for (let i = 0; i < data.length; i++) {
        if (i % 3 === 0) {
          data[i].ratio = 0.7
        } else if (i % 4 === 0) {
          data[i].ratio = 1.2
        } else {
          data[i].ratio = 1
        }
      }
    })

    screenHeight.value = h
    screenList.value = newChunk
  } catch (e) {
    // console.log(e)
  }

}
// 新闻
const getHomeNews = async () => {
  try {
    const {data} = await getNewsTypeServer()
    newsTypeList.value = data
    activeNewsType.value = data[0]['dictValue']
    await getHomeNewsList();
    // switchNews(activeNewsType.value)
  } catch (e) {
    // console.log(e)
  }
}
const switchNews = (newsInfo: any) => {
  activeNewsType.value = newsInfo['dictValue']
  getHomeNewsList()
}

const getHomeNewsList = async () => {
  try {
    const {data} = await getNewsListServer(activeNewsType.value, true, 1, 4)
    newsAbout.Hot = data.news['rows'][0]
    newsAbout.list = data.news['rows'].slice(1, 4)
  } catch (e) {
    // console.log(e)
  }
}
const BannerInfo = ref({
  imageOrVideo: '',
  intro: '',
  title: '',
  caseIntroList: '',
})
const getHomeBanner = async () => {
  const {data} = await getWebBanner(1)
  if (data) {
    BannerInfo.value = data
  }
}

let subForm = reactive({
  company: '',
  name: '',
  phone: '',
  typeId: 1,//1:加入我们(首页) 2:官网留言(合作伙伴)
})
const allowSubmit = ref(true)
const subFormHandle = () => {
  if (!allowSubmit.value) {
    return
  }
  allowSubmit.value = false
  // 判断
  if (!subForm.name) {
    ElMessage({
      message: "请输入姓名",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/.test(subForm.phone)) {
    ElMessage({
      message: "请检查联系方式",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }

  if (!subForm.company) {
    ElMessage({
      message: "请输入公司名称",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  let form = Object.assign({}, subForm)

  partnerSub(form)
      .then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "提交成功",
            type: "success",
            duration: 3000
          });
          reset()
        } else {
          allowSubmit.value = true
        }
      })
      .catch((e) => {
        allowSubmit.value = true
      })
      .finally(() => {
        allowSubmit.value = true
      })
}
const handleScroll = () => {
  let targetElement: HTMLElement = document.querySelector('.ht-home-count-up')!;
  if (isElementInViewport(targetElement)) {
    showCount.value = true;
  } else {
    showCount.value = false
  }
};
const reset = () => {
  subForm.company = ''
  subForm.name = ''
  subForm.phone = ''
}
let T = throttle(handleScroll, 100)
onMounted(() => {
  window.addEventListener('scroll', T);
});
getProduct()
getSolution()
getScreenList()
getHomeNews()
getHomeBanner()

const seoInfo = ref({})
const getSeo = async () => {
  const {data} = await getSeoInfoServer("/")
  seoInfo.value = {...data}
}
getSeo()

onUnmounted(() => {
  window.addEventListener('scroll', T);
});
</script>
<template>
  <div class="ht-home">
    <Head>
      <Title>{{ seoInfo.title }}</Title>
      <Meta name="description" :content="seoInfo.description"/>
      <Meta name="keywords" :content="seoInfo.keyword"/>
    </Head>
    <div class="ht-home-banner">
      <div class="ht-home-banner-container">
        <div class="banner-container">
          <BannerMedia :url="BannerInfo.imageOrVideo||DefaultBannerImage"/>
        </div>
        <div class="ht-home-b-c ht-home-banner-title" v-aos="['animate__fadeInUp']" data-aos-delay="0.2s">
          {{ BannerInfo.title || '华途信息战略2.0时代' }}
        </div>
        <div class="ht-home-banner-title" v-aos="['animate__fadeInUp']" data-aos-delay="0.5s">
          {{ BannerInfo.intro || '新一代数据安全治理解决方案及服务提供商' }}}
        </div>
        <NuxtLink to="/about" class="ht-home-banner-learn-more" target="_blank" v-aos="['animate__fadeInUp']"
                  data-aos-delay="0.8s">
          <span>深入探索</span>
        </NuxtLink>
      </div>
    </div>
    <!-- 产品 -->
    <div class="ht-home-product">
      <div class="ht-home-desc">
        <div class="desc-title">我们的产品</div>
        <div class="desc-content">专注数据安全领域十六年，为客户提供完善、可靠的数据安全产品解决方案</div>
      </div>
      <div class="ht-home-card-box" v-if="productList.length">
        <div class="ht-home-card-box-top">
          <div class="ht-home-card-box-1">
            <div class="h-card-title">
              <span>{{ productList[0].title }}</span>
              <span class="h-high-light">产品</span>
            </div>
            <div class="h-card-desc">{{ productList[0]['intro'] }}</div>
            <NuxtLink :to="'/product?type='+productList[0]['id']" target="_blank" class="h-card-detail-btn">
              <span>查看详情</span>
              <img src="~/assets/icons/more_right_black.png" class="black"/>
              <img src="~/assets/icons/more_right_white.png" class="white"/>
            </NuxtLink>
            <img class="card-main-image" :src="productList[0]['image']"/>
          </div>
          <div class="ht-home-card-box-2">
            <div class="h-card-title">
              <span>{{ productList[1].title }}</span>
              <span class="h-high-light">产品</span>
            </div>
            <div class="h-card-desc">{{ productList[1]['intro'] }}</div>
            <NuxtLink :to="'/product?type='+productList[1]['id']" target="_blank" class="h-card-detail-btn">
              <span>查看详情</span>
              <img src="~/assets/icons/more_right_black.png" class="black"/>
              <img src="~/assets/icons/more_right_white.png" class="white"/>
            </NuxtLink>
            <img class="card-main-image" :src="productList[1]['image']"/>
          </div>
        </div>
        <div class="ht-home-card-box-bottom">
          <div class="ht-home-card-box-3">
            <div class="h-card-title">
              <span>{{ productList[2].title }}</span>
              <span class="h-high-light">产品</span>
            </div>
            <div class="h-card-desc">{{ productList[2]['intro'] }}</div>
            <NuxtLink :to="'/product?type='+productList[2]['id']" target="_blank" class="h-card-detail-btn">
              <span>查看详情</span>
              <img src="~/assets/icons/more_right_black.png" class="black"/>
              <img src="~/assets/icons/more_right_white.png" class="white"/>
            </NuxtLink>
            <img class="card-main-image" :src="productList[2]['image']"/>
          </div>
          <div class="ht-home-card-box-4">
            <div class="h-card-title">
              <span>{{ productList[3].title }}</span>
              <span class="h-high-light">产品</span>
            </div>
            <div class="h-card-desc">{{ productList[3]['intro'] }}</div>
            <NuxtLink :to="'/product?type='+productList[3]['id']" target="_blank" class="h-card-detail-btn">
              <span>查看详情</span>
              <img src="~/assets/icons/more_right_black.png" class="black"/>
              <img src="~/assets/icons/more_right_white.png" class="white"/>
            </NuxtLink>
            <img class="card-main-image" :src="productList[3]['image']"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 解决方案 -->
    <div class="ht-home-solution">
      <div class="ht-home-desc">
        <div class="desc-title">我们的行业解决方案</div>
        <div class="desc-content">新一代数据安全治理解决方案及服务提供商</div>
      </div>
      <div class="ht-home-solution-card-box">
        <Swiper :slides-per-view="5" v-if="solutionList.length">
          <SwiperSlide v-for="(item, index) in solutionList" :key="index">
            <div class="home-solution-item" :style="{backgroundImage:`url('${item['coverImage']}')`}">
              <div class="home-solution-title">{{ item.title }}</div>
              <div class="home-solution-desc">
                {{ item['intro'] }}
              </div>
              <NuxtLink :to="`/solution?type=${item.id}`" target="_blank" class="home-solution-more">
                <span>探索更多</span>
                <img class="solution-more-btn" src="~/assets/icons/more_right_white.png" alt=""/>
              </NuxtLink>
            </div>
          </SwiperSlide>
          <SwiperControl/>
        </Swiper>
      </div>
    </div>
    <!-- 客户 -->
    <div class="ht-home-client">
      <div class="ht-home-desc">
        <div class="desc-title">我们的客户</div>
        <div class="desc-content">1000+五百强企业、2000+央企和上市公司客户市场占有率第一</div>
        <div class="desc-content">30+行业10000+客户提供数据安全服务</div>
      </div>
      <div class="ht-home-client-box">
        <Swiper
            v-if="screenList.length"
            :slides-per-view="1"
            :modules="[SwiperAutoplay]"
            :loop="true"
            effect="slide"
            :autoplay="{
                  delay: 6330,
                  disableOnInteraction: true,
                }"
        >
          <SwiperSlide v-for="(item, index) in screenList" :key="index">
            <div class="ht-home-client-box-main">
              <div class="ht-home-client-line1" :style="{height:screenHeight+'rem'}">

                <div class="ht-home-client-item" :style="{width:`${2.93*i.ratio}rem`,height:`${2.93*i.ratio}rem`}"
                     v-for="(i,j) in item" :key="i">
                  <div class="logo-box">
                    <img :src="i['logo']" :style="{width:`${1.6*i.ratio}rem`}"/>
                  </div>
                </div>

              </div>
            </div>
          </SwiperSlide>
        </Swiper>
        <NuxtLink to="/solution" class="ht-home-client-learn-more">
          <LearnMore style="transform: scale(1.2)" label="探索更多"/>
        </NuxtLink>
      </div>
    </div>
    <!-- 计数区 -->
    <div class="ht-home-count-up">
      <div class="ht-home-count-item">
        <img class="ht-home-count-item-icon" src="~/assets/images/home/count-icon-1.png" alt=""/>
        <div class="ht-home-count-item-txt">专注数据安全</div>
        <div class="ht-home-count-item-v">
          <span class="value" v-if="showCount">
            <count-up :end-val="10" :options="{ useGrouping: false }"/>
          </span>
          <sup class="plus">+</sup>
          <span class="unit">年</span>
        </div>
      </div>

      <div class="ht-home-count-item">
        <img class="ht-home-count-item-icon" src="~/assets/images/home/count-icon-2.png" alt=""/>
        <div class="ht-home-count-item-txt">国家省市重大研究项目</div>
        <div class="ht-home-count-item-v">
          <span class="value" v-if="showCount">
            <count-up :end-val="20" :options="{ useGrouping: false }"/>
          </span>
          <sup class="plus">+</sup>
          <span class="unit"></span>
        </div>
      </div>
      <div class="ht-home-count-item">
        <img class="ht-home-count-item-icon" src="~/assets/images/home/count-icon-3.png" alt=""/>
        <div class="ht-home-count-item-txt">专利&软著</div>
        <div class="ht-home-count-item-v">
          <span class="value" v-if="showCount">
            <count-up :end-val="100" :options="{ useGrouping: false }"/>
          </span>
          <sup class="plus">+</sup>
          <span class="unit"></span>
        </div>
      </div>
      <div class="ht-home-count-item">
        <img class="ht-home-count-item-icon" src="~/assets/images/home/count-icon-4.png" alt=""/>
        <div class="ht-home-count-item-txt">服务客户</div>
        <div class="ht-home-count-item-v">
          <span class="value" v-if="showCount">
            <count-up :end-val="10000" :options="{ useGrouping: false }"/>
          </span>
          <sup class="plus">+</sup>
          <span class="unit"></span>
        </div>
      </div>
    </div>
    <!-- 新闻 -->
    <div class="ht-home-news">
      <div class="ht-home-news-top">
        <div class="ht-home-news-top-title">华途新闻，眼界大开</div>
        <div class="ht-home-news-top-navs">
          <div class="ht-home-news-top-navs-item"
               v-for="item in newsTypeList"
               :class="activeNewsType===item['dictValue']?'active':''"
               :key="item['dictValue']"
               @click="switchNews(item)"
          >{{ item['dictLabel'] }}
          </div>
        </div>
      </div>
      <div class="ht-home-news-main">
        <div class="ht-home-news-main-hot" v-if="newsAbout.Hot.id">
          <div class="left-tag">最新资讯</div>
          <img class="hot-image" :src="newsAbout.Hot['image']" alt=""/>
          <div class="hot-time">
            <img class="active" src="~/assets/icons/icon_clock-active.png" alt=""/>
            <img class="black" src="~/assets/icons/icon_clock-black.png" alt=""/>
            <span>{{ newsAbout.Hot['dateStr'] }}</span>
          </div>
          <div class="hot-title">{{ newsAbout.Hot.title }}</div>
          <div class="hot-newsletter">
            {{ newsAbout.Hot['introduce'] }}
          </div>
          <NuxtLink :to="`/about/news/${newsAbout.Hot.id}`" target="_blank" class="hot-learn-more">
            <span>探索更多</span>
            <img class="white" src="~/assets/icons/more_right_white.png" alt=""/>
            <img class="black" src="~/assets/icons/more_right_black.png" alt=""/>
          </NuxtLink>
        </div>
        <div class="ht-home-new-main-list">
          <NuxtLink :to="'/about/news/'+item.id" target="_blank" class="ht-home-news-main-list-item"
                    v-for="item in newsAbout.list"
                    :key="item.id">
            <div class="ht-home-news-list-poster">
              <img class="list-image" :src="item['image']" alt=""/>
            </div>
            <div class="ht-home-news-list-info">
              <div class="ht-home-new-list-title">{{ item['title'] }}</div>
              <div class="ht-home-new-list-newsletter">{{ item['introduce'] }}</div>
              <div class="ht-home-new-list-time">{{ item['dateStr'] }}</div>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
    <!-- 邀请填写信息 -->
    <div class="ht-home-invite">
      <div class="ht-home-invite-title">立志成为全球领先的数据安全企业</div>
      <div class="ht-home-invite-content">
        <input type="text" placeholder="您的姓名" v-model="subForm.name" maxlength="30"/>
        <input type="text" placeholder="您的公司" v-model="subForm.company" maxlength="100"/>
        <input type="text" placeholder="电话号码" v-model="subForm.phone" maxlength="20"/>
        <div class="home-submit-btn" @click="subFormHandle">立即提交</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ht-home {
  width: 100%;
  overflow: hidden;
  position: relative;

  .ht-home-banner {
    width: 24rem;
    height: 13.5rem;
    position: relative;

    .ht-home-banner-container {
      position: relative;
      top: 0;
      left: 0;
      width: 24rem;
      height: 13.5rem;
      //background-image: url(~/assets/images/home/home_banner.jpg);
      //background-size: cover;
      //background-repeat: no-repeat;
      text-align: center;
      padding-top: 0.1px;

      .banner-container {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }


    .ht-home-b-c {
      margin-top: 5rem;
    }

    .ht-home-banner-title {
      height: 0.98rem;
      line-height: 1.3rem;
      font-size: 0.73rem;
      font-family: HarmonyOS Sans SC, sans-serif;
      font-weight: bold;
      color: #ffffff;
    }

    .ht-home-banner-learn-more {
      display: block;
      width: 2.17rem;
      height: 0.65rem;
      background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
      border-radius: 0.31rem;
      margin: auto;
      margin-top: 0.88rem;
      color: #ffffff;

      span {
        display: block;
        font-size: 0.2rem;
        line-height: 0.65rem;
        background: url(~/assets/icons/more_right_white.png);
        background-repeat: no-repeat;
        background-size: 0.0875rem 0.15rem;
        background-position: 1.56rem center;
        padding-left: 0.54rem;
        text-align: left;
      }
    }
  }

  // 产品
  .ht-home-product {
    background: #fff url(~/assets/images/home/bg_product.png) no-repeat;
    background-size: 24rem 12.46rem;
    background-position: center -2.3rem;
    padding: 0 0.81rem;
    position: relative;
    z-index: 1;

    .ht-home-desc {
      padding-top: 0.1px;
      font-family: HarmonyOS Sans SC, sans-serif;
      text-align: center;

      .desc-title {
        margin-top: 2.33rem;
        font-size: 0.57rem;
        font-weight: bold;
        color: #000000;
      }

      .desc-content {
        font-size: 0.33rem;
        font-weight: 400;
        color: #111111;
        line-height: 0.63rem;
      }
    }

    .ht-home-card-box {
      margin-top: 1.1rem;
      padding-bottom: 0.1rem;
      font-family: HarmonyOS Sans SC, sans-serif;

      .h-card-title {
        font-size: 0.45rem;
        font-weight: 500;
        color: #111111;
      }

      .h-card-desc {
        width: 4.33rem;
        height: 0.76rem;
        font-size: 0.2rem;
        font-weight: 500;
        color: #999999;
        line-height: 0.34rem;
        margin: 0.21rem 0 0.34rem 0;
      }

      .h-card-detail-btn {
        display: block;
        width: 1.73rem;
        height: 0.51rem;
        line-height: 0.51rem;
        border-radius: 0.31rem;
        border: 1px solid #999999;
        text-align: left;
        padding-left: 0.43rem;
        font-size: 0.15rem;
        font-weight: bold;
        color: #111111;
        position: relative;

        img {
          width: 0.0875rem;
          height: 0.15rem;
          position: absolute;
          left: 1.25rem;
          top: 0;
          bottom: 0;
          margin: auto;

          &.black {
            display: inline-block;
          }

          &.white {
            display: none;
          }
        }
      }

      .ht-home-card-box-top {
        display: flex;
        justify-content: space-between;

        > div {
          padding: 1.09rem 0 0 1.05rem;
          position: relative;
          background: linear-gradient(90deg, #f8f9fb 0%, rgba(255, 255, 255, 1) 50%);

          &:hover {
            box-shadow: 0rem 0rem 0.64rem 0.01rem rgba(17, 93, 241, 0.08);

            .h-high-light {
              color: #2e6aff;
            }

            .h-card-detail-btn {
              background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
              color: #fff;
              border: none;

              img {
                &.black {
                  display: none;
                }

                &.white {
                  display: inline-block;
                }
              }
            }
          }

          &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: #fff;
            position: absolute;
            left: -0.08rem;
            top: 0;
            z-index: -1;
            border-radius: 0.19rem;
          }
        }

        .ht-home-card-box-1 {
          width: 12.91rem;
          height: 5.64rem;
          border-radius: 0.19rem;

          .card-main-image {
            width: 5.78rem;
            height: 5.03rem;
            position: absolute;
            top: 0.31rem;
            right: 0.36rem;
          }
        }

        .ht-home-card-box-2 {
          width: 8.9rem;
          height: 5.64rem;
          border-radius: 0.19rem;

          .card-main-image {
            width: 3.63rem;
            height: 3.14rem;
            position: absolute;
            bottom: 0.24rem;
            right: 0.49rem;
          }
        }
      }

      .ht-home-card-box-bottom {
        margin-top: 0.4rem;
        display: flex;
        justify-content: space-between;

        > div {
          padding: 1.09rem 0 0 1.05rem;
          position: relative;
          background: linear-gradient(90deg, #f8f9fb 0%, rgba(255, 255, 255, 1) 50%);

          &:hover {
            box-shadow: 0 0 0.64rem 0.01rem rgba(17, 93, 241, 0.08);

            .h-high-light {
              color: #2e6aff;
            }

            .h-card-detail-btn {
              background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
              color: #fff;
              border: none;

              img {
                &.black {
                  display: none;
                }

                &.white {
                  display: inline-block;
                }
              }
            }
          }

          &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: #fff;
            position: absolute;
            left: -0.08rem;
            top: 0;
            z-index: -1;
            border-radius: 0.19rem;
          }
        }

        .ht-home-card-box-3 {
          width: 8.9rem;
          height: 5.64rem;
          border-radius: 0.19rem;

          .card-main-image {
            width: 4.76rem;
            height: 3.6rem;
            position: absolute;
            bottom: 0;
            right: 0.3rem;
          }
        }

        .ht-home-card-box-4 {
          width: 12.91rem;
          height: 5.64rem;
          border-radius: 0.19rem;

          .card-main-image {
            width: 6.5rem;
            height: 5.36rem;
            position: absolute;
            top: 0.13rem;
            right: 0.56rem;
          }
        }
      }
    }
  }

  // 解决方案
  .ht-home-solution {
    background: #fff url(~/assets/images/home/bg_product.png);
    background-repeat: no-repeat;
    background-size: 32.41rem 18.23rem;
    background-position: center -9.13rem;
    padding: 0 0.81rem;
    position: relative;
    z-index: 1;

    .ht-home-desc {
      padding-top: 0.1px;
      font-family: HarmonyOS Sans SC, sans-serif;
      text-align: center;

      .desc-title {
        margin-top: 2.01rem;
        font-size: 0.57rem;
        font-weight: bold;
        color: #000000;
      }

      .desc-content {
        font-size: 0.33rem;
        font-weight: 400;
        color: #111111;
        line-height: 0.63rem;
      }
    }

    .ht-home-solution-card-box {
      margin-top: 1.1rem;

      ::v-deep(.swiper-slide) {
        padding: 0.2rem 0;
      }

      .home-solution-item {
        display: inline-block;
        width: 4.31rem;
        height: 8.04rem;
        background: #ffffff;
        border-radius: 0.19rem;
        overflow: hidden;
        position: relative;
        background-size: 4.31rem 8.04rem;
        background-repeat: no-repeat;
        padding-top: 0.1px;
        transform: scale(1);
        transition: all 0.3s ease;

        a {
          display: none
        }

        &:hover {
          transform: scale(1.03);

          //.home-solution-title, .home-solution-desc, .home-solution-more {
          //  transition: 0.5s;
          //}

          .home-solution-desc {
            transition: all 0.3s ease;
            height: 0.81rem;
          }

          a {
            display: block;
          }
        }
      }

      .home-solution-title {
        margin: 0.85rem 0.2rem 0 0.2rem;
        text-align: center;
        font-size: 0.35rem;
        font-weight: 500;
        color: #ffffff;
        transform: scale(1);
      }

      .home-solution-desc {
        transition: all 0.3s ease;
        height: 0;
        margin: 0.35rem auto 0.12rem auto;
        width: 2.98rem;
        font-size: 0.18rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 0.28rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        transform: scale(1);

      }

      .home-solution-more {
        display: inline-block;
        margin-left: 1.64rem;
        margin-top: 0.24rem;
        font-size: 0.18rem;
        color: #fff;

        .solution-more-btn {
          width: 0.0875rem;
          height: 0.15rem;
          margin-left: 0.28rem;
        }
      }
    }
  }

  .ht-home-client {
    background: #fff url(~/assets/images/home/bg_client.png);
    width: 24rem;
    background-repeat: no-repeat;
    background-size: 24rem 15.6rem;
    padding-top: 0.1px;
    position: relative;
    z-index: 1;

    .ht-home-desc {
      padding-top: 0.1px;
      font-family: HarmonyOS Sans SC, sans-serif;
      text-align: center;

      .desc-title {
        margin-top: 1.51rem;
        font-size: 0.57rem;
        font-weight: bold;
        color: #000000;
        margin-bottom: 0.18rem;
      }

      .desc-content {
        font-size: 0.33rem;
        font-weight: 400;
        color: #111111;
        line-height: 0.63rem;
      }
    }

    @keyframes _show {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      80% {
        opacity: 0.4;
        transform: scale(1.12);
      }

      100% {
        opacity: 0.4;
        transform: scale(1.03);
      }
    }

    .ht-home-client-box {
      padding: 0 0.81rem;
      margin-top: 0.5rem;
      padding-bottom: 1px;

      .ht-home-client-box-main {
        padding: 0.6rem 0.7rem 1rem;
      }

      .ht-home-client-line1,
      {
        height: 10rem;
        position: relative;

        .ht-home-client-item {
          width: 2.93rem;
          height: 2.93rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          box-shadow: 0 0.04rem 0.9rem 0.01rem rgba(0, 0, 0, 0.06);
          border-radius: 100%;
          transition: 0.3s;
          position: absolute;
          z-index: 0;

          &:hover {
            transform: scale(1.2);
          }

          img {
            width: 1.8rem;
            margin: auto;
            display: block;
            //object-fit: scale-down;
          }

          .logo-box {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: linear-gradient(102deg, #3286f8 0%, #3cbfea 100%);

              &::before {
                content: '';
                width: 97%;
                height: 97%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                opacity: 0.1;
                border-radius: 100%;
                background: #3AB5EC;
                z-index: -1;
                animation: _show 3s 0s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
              }
            }
          }

          &:nth-child(1) {
            left: 0.81rem;
            top: .05rem;
          }

          &:nth-child(2) {
            left: 5.1rem;
            top: .05rem;
          }

          &:nth-child(3) {
            left: 8.94rem;
            top: 0.25rem;
          }

          &:nth-child(4) {
            left: 12.4rem;
            top: 1.05rem;
          }

          &:nth-child(5) {
            left: 15.94rem;
            top: 0.25rem;
          }

          &:nth-child(6) {
            left: -0.11rem;
            top: 4.05rem;
          }

          &:nth-child(7) {
            left: 3.44rem;
            top: 3.05rem;
          }

          &:nth-child(8) {
            left: 6.94rem;
            top: 3.05rem;
          }

          &:nth-child(9) {
            left: 13.54rem;
            top: 3.55rem;
          }

          &:nth-child(10) {
            left: 10.94rem;
            top: 4.65rem;
          }

          &:nth-child(11) {
            left: 18.14rem;
            top: 3.85rem;
          }

          &:nth-child(12) {
            left: 1.04rem;
            top: 7.35rem;
          }

          &:nth-child(13) {
            left: 8.24rem;
            top: 6.95rem;
          }

          &:nth-child(14) {
            left: 4.54rem;
            top: 5.95rem;
          }

          &:nth-child(15) {
            left: 11.44rem;
            top: 7.25rem;
          }

          &:nth-child(16) {
            left: 17.34rem;
            top: 7.15rem;
          }

        }
      }

      .ht-home-client-learn-more {
        display: block;
        width: 1.73rem;
        margin: 0 auto 1.3rem;
      }
    }
  }

  // 计数
  .ht-home-count-up {
    width: 24rem;
    height: 7.85rem;
    background: url(~/assets/images/home/home-count-up.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    position: relative;
    z-index: 1;

    .ht-home-count-item {
      display: inline-block;
      width: 6rem;
      height: 100%;
      transition: 0.1s;
      text-align: center;
      color: #fff;

      &:hover {
        backdrop-filter: blur(20px);
      }

      .ht-home-count-item-icon {
        max-width: 0.81rem;
        max-height: 0.706rem;
        margin-top: 2.89rem;
      }

      .ht-home-count-item-txt {
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        font-size: 0.24rem;
        font-weight: 500;
      }

      .ht-home-count-item-v {
        .value {
          font-size: 0.8rem;
          font-weight: normal;
        }

        .plus {
          vertical-align: top;
          font-size: 0.4rem;
        }

        .unit {
          vertical-align: super;
          font-size: 0.28rem;
          font-weight: bold;
        }
      }
    }
  }

  // 新闻
  .ht-home-news {
    background: #fff;
    padding: 0 0.81rem;
    padding-bottom: 1.98rem;
    padding-top: 1.9rem;
    position: relative;
    z-index: 1;

    &-top {
      display: flex;
      justify-content: space-between;

      &-title {
        font-size: 0.57rem;
        font-weight: bold;
      }

      &-navs {
        display: flex;
        align-items: center;

        &-item {
          cursor: pointer;
          margin-left: 0.78rem;
          font-size: 0.28rem;

          &.active {
            color: #2e6aff;
          }
        }
      }
    }

    &-main {
      display: flex;
      justify-content: space-between;
      margin-top: 1.09rem;

      &-hot {
        width: 11.05rem;
        height: 8.74rem;
        background: #ffffff;
        border-radius: 0.13rem;
        position: relative;

        &:hover {
          box-shadow: 0.21rem 0.19rem 0.25rem 0.01rem rgba(17, 93, 241, 0.08);

          .hot-time {
            color: #2e6aff;
            font-size: 0.2rem;

            img {
              &.active {
                display: inline-block;
              }

              &.black {
                display: none;
              }
            }
          }
        }

        .left-tag {
          width: 1.84rem;
          height: 0.7rem;
          background: linear-gradient(59deg, #47ffda 0%, #2e6aff 100%);
          border-radius: 0.13rem 0 0.13rem 0;
          position: absolute;
          top: 0;
          left: 0;
          font-size: 0.2rem;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          line-height: 0.7rem;
        }

        .hot-image {
          width: 11.05rem;
          height: 4.58rem;
          border-radius: 0.13rem 0.13rem 0 0;
          object-fit: cover;
        }

        .hot-time {
          margin-top: 0.6rem;
          margin-left: 0.63rem;
          margin-bottom: 0.35rem;
          color: #111;
          display: flex;
          align-items: center;

          img {
            display: inline-block;
            width: 0.21rem;
            height: 0.21rem;
          }

          .active {
            display: none;
          }

          .black {
            display: inline-block;
          }


          span {
            font-size: 0.2rem;
            margin-left: 0.13rem;
          }
        }

        .hot-title {
          margin-left: 0.63rem;
          font-size: 0.3rem;
          font-weight: bold;
          line-height: 0.45rem;
          overflow: hidden;
        }

        .hot-newsletter {
          margin-left: 0.63rem;
          margin-top: 0.24rem;
          width: 9.63rem;
          height: 0.56rem;
          font-size: 0.2rem;
          font-weight: 500;
          color: #aeaeae;
          text-overflow: ellipsis; // 溢出用省略号显示
          overflow: hidden; // 超出的文本隐藏
          display: -webkit-box; // 作为弹性伸缩盒子模型显示
          -webkit-line-clamp: 2; // 显示的行
          -webkit-box-orient: vertical;
        }

        .hot-learn-more {
          display: block;
          margin-left: 0.63rem;
          margin-top: 0.48rem;
          width: 2.17rem;
          height: 0.65rem;
          border-radius: 0.31rem;
          font-size: 0.2rem;
          font-weight: 400;
          line-height: 0.65rem;
          border: 1px solid #111;
          color: #111;
          padding-left: 0.54rem;

          img {
            width: 0.08rem;
            height: 0.15rem;
            margin-left: 0.23rem;
            user-select: none;
          }

          .white {
            display: none;
          }

          &:hover {
            border: none;

            .white {
              display: inline-block;
            }

            .black {
              display: none;
            }

            background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
            color: #fff;
          }
        }
      }

      &-list {
        &-item {
          display: flex;
          margin-bottom: 0.65rem;

          &:nth-child(3) {
            margin-bottom: 0;
          }

          &:hover {
            //box-shadow: 0.21rem 0.19rem 0.25rem 0.01rem rgba(17, 93, 241, 0.08);

            .ht-home-new-list-time, .ht-home-new-list-title {
              color: #2e6aff !important;
            }
          }

          .ht-home-news-list-poster {
            margin-right: 0.31rem;

            .list-image {
              width: 3.73rem;
              height: 2.45rem;
              border-radius: 0.06rem;
              object-fit: cover;
            }
          }

          .ht-home-news-list-info {
            .ht-home-new-list-title {
              width: 6.48rem;
              height: 0.79rem;
              font-size: 0.28rem;
              font-weight: 500;
              color: #111111;
            }

            .ht-home-new-list-newsletter {
              width: 6.4rem;
              font-size: 0.2rem;
              font-weight: 500;
              color: #aeaeae;
              overflow: hidden;
              margin-top: 0.1rem;
              margin-bottom: 0.23rem;
              text-overflow: ellipsis; // 超出用省略号显示
              display: -webkit-box; // 作为弹性伸缩盒子模型显示
              -webkit-line-clamp: 1; // 显示的行
              -webkit-box-orient: vertical;
            }

            .ht-home-new-list-time {
              font-size: 0.2rem;
              font-weight: 500;
              color: #111111;
            }
          }
        }
      }
    }
  }

  // 邀请
  .ht-home-invite {
    width: 24rem;
    height: 4.2rem;
    background: #fff url(~/assets/images/home/home_invite_bg.png) no-repeat;
    background-size: 24rem 4.2rem;
    text-align: center;
    padding-top: 0.1px;
    position: relative;
    z-index: 1;

    &-title {
      font-size: 0.57rem;
      font-weight: bold;
      color: #ffffff;
      margin-top: 0.86rem;
      margin-bottom: 0.83rem;
    }

    &-content {
      input {
        display: inline-block;
        width: 4.4rem;
        height: 0.62rem;
        background: #ffffff;
        border-radius: 0.04rem;
        padding: 0.19rem 0 0.19rem 0.38rem;
        font-size: 0.2rem;
        font-weight: 400;
        color: #595656;
        outline: none;
        border: none;
        margin-right: 0.39rem;
      }

      .home-submit-btn {
        display: inline-block;
        width: 3.95rem;
        height: 0.64rem;
        border-radius: 0.33rem;
        text-align: center;
        line-height: 0.64rem;
        font-size: 0.2rem;
        font-weight: 400;
        cursor: pointer;
        border: 0.01rem solid #fff;
        color: #ffffff;
        background-color: transparent;

        &:hover {
          background: #2e6aff;
          border: 0.01rem solid transparent;
        }
      }
    }
  }
}
</style>
